<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>车牌违规查询</title>
</head>
<body>
<form action="/" method="post">
    {% csrf_token %}
    <div style="width: 100%;margin: 20px;">
        <input type="text" placeholder="请输入车牌号或车主名" name="car_id">
        <input type="date" name="start">
        <input type="date" name="end">
        <button>查询</button>
        <hr>
    </div>
</form>
<div class="table-responsive">
    <table class="table">
        <tr>
            <td>车牌号</td>
            <td>车主</td>
            <td>违章原因</td>
            <td>违章日期</td>
            <td>处罚方式</td>
            <td>是否受理</td>
            <td>操作</td>
        </tr>
        {% for record in page_obj %}
            <tr>
                <td>{{ record.carno }}</td>
                <td>{{ record.owner }}</td>
                <td>{{ record.reason }}</td>
                <td>{{ record.makedate }}</td>
                <td>{{ record.punish }}</td>
                <td>{{ record.dealt | yesno:'未受理,已受理' }}</td>
                <td>
                    <div class="deal">
                        {% if record.dealt %}
                            <a href="/dealt/?record={{ record.id }}&dealt={{ record.dealt }}"
                               i class="btn btn-primary btn-lg active " role="button">受理</a>
                        {% else %}
                            <button type="button" class="btn btn-lg btn-primary" disabled="disabled">受理</button>
                        {% endif %}
                        <a href="/delete/?record={{ record.id }}&dealt={{ record.dealt }}"
                           class="btn btn-primary btn-lg active " role="button">删除</a>
                    </div>
                </td>
            </tr>
        {% endfor %}
    </table>
</div>
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="/show/?carno={{ carno }}&start={{ start }}&end={{ end }}&page=1">&laquo; first</a>
            <a href="/show/?carno={{ carno }}&start={{ start }}&end={{ end }}&page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="/show/?carno={{ carno }}&start={{ start }}&end={{ end }}&page={{ page_obj.next_page_number }}">next</a>
            <a href="/show/?carno={{ carno }}&start={{ start }}&end={{ end }}&page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(() => {
        $('.deal>a').on('click', (evt) => {
            alert('ok')
            evt.preventDefault()
            let url = $(evt.target).attr('href')
            $.getJSON(url, (json) => {
                if (json.code === 10000) {
                    alert(json.msg)
                    location.reload();
                } else if (json.code === 10001) {
                    alert(json.msg)

                }
            })
        })
    })
</script>
</body>
</html>